<template>
    <div class="activity">
        社区
        <div class="activity-child">
            <!-- 命名路由 -->
            <router-link :to="{ name: 'academic' }">学术讨论</router-link>
            <router-link :to="{ name: 'personal' }">个人中心</router-link>
            <router-link to="/activity/download">资源下载</router-link>
            <router-link :to="{ name: 'vuexstore' }">vuex</router-link>
        </div>
        <div class="activity-view">
            <router-view></router-view>
        </div>
        
    </div>
</template>
<script>
export default {
    /* 
        命名路由 name :to="{name: 'academic'}"
        嵌套路由 children
        重定向 redirect
        别名路由 alias 避免一些非必要的结果
    */
}
</script>

<style scoped>
a{
    display: inline-block;
    margin: 10px 5px 0;
    padding: 5px 10px;
    text-decoration: none;
}
a.router-link-exact-active{
    background-color: #3385ff;
    color: #fff;
}
.activity-view{
    margin-top: 40px;
    
}

</style>